<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getRecordAPI } from '@/api/paper.js'
import { formatDate } from '@/utils/format.js'

const DoRightEnums = {
  0: {
    type: 'danger',
    text: '错误'
  },
  1: {
    type: 'success',
    text: '正确'
  },
  2: {
    type: 'warning',
    text: '待批改'
  }
}

const route = useRoute()
const recordInfo = ref({})

// 获取答卷信息
const getPaper = async () => {
  const { data: res } = await getRecordAPI(route.params.id)
  if (res.status === 200) {
    recordInfo.value = res.data
  }
}
getPaper()

// 题目跳转定位
const tagClick = (val) => {
  const p = document.querySelectorAll('p')
  const content = document.querySelector('.el-scrollbar__wrap')
  for (let i = 0; i < p.length; i++) {
    if (+p[i].getAttribute('data-id') === val) {
      const items = p[i].offsetTop - 70
      return content.scroll(0, items)
    }
  }
}
</script>

<template>
  <div class="recordInfo-container">
    <div class="recordInfo-order">
      <el-card shadow="never">
        <template #header>
          <h3 style="font-size: 0.24rem">{{ recordInfo.paper?.paperTitle }}</h3>
          <div class="recordInfo-order-header">
            <div class="recordInfo-order-header-deatil">
              <span>
                <i style="color: #989898">得分：</i>
                {{ recordInfo.answer?.score }}
              </span>
              <span>
                <i style="color: #989898">耗时：</i>
                {{ recordInfo.answer?.doTime }} 分钟
              </span>
            </div>
            <div class="recordInfo-order-header-createInfo">
              <span>
                <i style="color: #989898">试卷总分：</i>
                {{ recordInfo.paper?.score }}
              </span>
              <span>
                <i style="color: #989898">创建时间：</i>
                {{ formatDate(recordInfo.paper?.create_time, 'YYYY-MM-DD') }}
              </span>
            </div>
          </div>
        </template>

        <div class="recordInfo-order-titleItem">
          <el-tag
            v-for="item in recordInfo.answer?.answerItems"
            :key="item.id"
            :type="DoRightEnums[item.doRight].type"
            class="items"
            @click="tagClick(item.itemOrder)"
            >{{ item.itemOrder }}</el-tag
          >
        </div>
      </el-card>
    </div>
    <div class="recordInfo-content">
      <el-card shadow="never">
        <el-scrollbar height="5.56rem">
          <div
            class="recordInfo-content-title"
            v-for="(title, indexs) in recordInfo.paper?.titleItems"
            :key="indexs"
          >
            <h3 class="title">{{ title.name }}</h3>
            <div
              class="recordInfo-content-question"
              v-for="question in title.questionItem"
              :key="question.id"
            >
              <p :data-id="question.itemOrder">
                <span>{{ question.itemOrder }}.</span>
                <span v-html="question.title"></span>
                &nbsp;&nbsp;&nbsp;({{ question.score }}分)
              </p>

              <div class="recordInfo-content-question-item">
                <el-radio-group
                  v-if="
                    question.question_type === 1 || question.question_type === 3
                  "
                  v-model="
                    recordInfo.answer.answerItems[question.itemOrder - 1]
                      .content
                  "
                  disabled
                >
                  <el-radio-button
                    :label="item.prefix"
                    size="large"
                    v-for="item in question.items"
                    :key="item.prefix"
                    >{{
                      `${item.prefix}&nbsp;&nbsp; ${item.content}`
                    }}</el-radio-button
                  >
                </el-radio-group>
                <el-checkbox-group
                  v-else-if="question.question_type === 2"
                  size="large"
                  v-model="
                    recordInfo.answer.answerItems[question.itemOrder - 1]
                      .contentArray
                  "
                  disabled
                >
                  <el-checkbox-button
                    :label="item.prefix"
                    v-for="(item, index) in question.items"
                    :key="index"
                    >{{
                      `${item.prefix}&nbsp;&nbsp; ${item.content}`
                    }}</el-checkbox-button
                  >
                </el-checkbox-group>
                <el-form
                  v-if="question.question_type === 4"
                  :model="
                    recordInfo.answer.answerItems[question.itemOrder - 1]
                      .contentArray
                  "
                >
                  <el-form-item
                    v-for="(item, index) in question.items"
                    :key="item.prefix"
                    :label="item.prefix"
                  >
                    <el-input
                      v-model="
                        recordInfo.answer.answerItems[question.itemOrder - 1]
                          .contentArray[index]
                      "
                      style="width: 4rem"
                      disabled
                    />
                  </el-form-item>
                </el-form>
                <el-input
                  v-if="question.question_type === 5"
                  type="textarea"
                  resize="none"
                  class="question-item-textarea"
                  v-model="
                    recordInfo.answer.answerItems[question.itemOrder - 1]
                      .content
                  "
                  disabled
                />
                <div class="recordInfo-content-answer">
                  <div class="question-result">
                    结果：
                    <el-tag
                      :type="
                        DoRightEnums[
                          recordInfo.answer?.answerItems[question.itemOrder - 1]
                            .doRight
                        ].type
                      "
                      >{{
                        DoRightEnums[
                          recordInfo.answer?.answerItems[question.itemOrder - 1]
                            .doRight
                        ].text
                      }}</el-tag
                    >
                  </div>
                  <div
                    class="question-answer"
                    v-if="question.question_type !== 5"
                  >
                    标准答案：
                    <span class="question-answer-correct">{{
                      question.correct.toString()
                    }}</span>
                  </div>
                  <div class="user-answer">
                    做题答案：
                    <span
                      :class="
                        DoRightEnums[
                          recordInfo.answer?.answerItems[question.itemOrder - 1]
                            .doRight
                        ].type
                      "
                      >{{
                        recordInfo.answer.answerItems[question.itemOrder - 1]
                          .content ||
                        recordInfo.answer.answerItems[
                          question.itemOrder - 1
                        ].contentArray.join()
                      }}</span
                    >
                  </div>
                  <div class="user-score">
                    得分：<span>{{
                      recordInfo.answer.answerItems[question.itemOrder - 1]
                        .score
                    }}</span>
                  </div>
                  <div class="question-difficult">
                    难度：<el-rate
                      v-model="question.difficult"
                      disabled
                      text-color="#ff9900"
                      style="height: auto"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .recordInfo-container {
    display: flex;
    flex-direction: column;
    .recordInfo-order {
      margin-right: 0 !important;
      margin-bottom: 0.2rem;
      .recordInfo-order-header {
        margin-top: 0.2rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .recordInfo-order-header-deatil {
          margin-bottom: 0.1rem;
        }

        span {
          margin-right: 0.1rem;

          i {
            text-align: right;
          }
        }
      }

      .recordInfo-order-titleItem {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 0.2rem;

        .items {
          width: 0.3rem;
          height: 0.3rem;
          margin-right: 0.1rem;
          margin-bottom: 0.1rem;
          cursor: pointer;
        }
      }
    }

    .recordInfo-content {
      flex: 1;
      .recordInfo-content-title {
        .title {
          padding: 0.2rem 0;
          font-size: 0.24rem;
        }

        .recordInfo-content-question {
          padding-left: 0.28rem;
          margin-bottom: 0.2rem;
          font-size: 0.16rem;
          p {
            margin-bottom: 0.14rem;

            &:deep(.fill-span) {
              margin: 0 0.06rem;
              padding: 0 0.4rem;
              border-bottom: 2px solid #ccc;
            }
          }

          .recordInfo-content-question-item {
            padding-left: 0.32rem;

            .el-checkbox-button {
              --el-radio-button-disabled-checked-fill: var(
                --el-border-color-extra-light
              );

              &.is-checked:deep(.el-checkbox-button__inner) {
                background-color: var(--el-radio-button-disabled-checked-fill);
              }
            }

            .recordInfo-content-answer {
              min-height: 1.5rem;
              margin-top: 0.2rem;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .user-answer {
                .success {
                  color: #67c23a;
                }

                .error {
                  color: #f56c6c;
                }

                .warning {
                  color: #e6a23c;
                }
              }

              .question-difficult {
                display: flex;
                justify-content: flex-start;
                align-items: center;
              }
            }
          }
        }
      }
    }
  }
}
.recordInfo-container {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.8rem;
  min-height: 4.8rem;

  .recordInfo-order {
    flex: 1;
    margin-right: 0.2rem;
    min-width: 3.4rem;

    .recordInfo-order-header {
      font-size: 0.14rem;
      margin-top: 0.2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .recordInfo-order-header-deatil {
        margin-bottom: 0.1rem;
      }

      span {
        margin-right: 0.1rem;

        i {
          text-align: right;
        }
      }
    }

    .recordInfo-order-titleItem {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-bottom: 0.2rem;

      .items {
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
        cursor: pointer;
      }
    }
  }

  .recordInfo-content {
    flex: 4;

    .recordInfo-content-title {
      .title {
        padding: 0.2rem 0;
        font-size: 0.24rem;
      }

      .recordInfo-content-question {
        padding-left: 0.28rem;
        margin-bottom: 0.2rem;
        font-size: 0.16rem;
        p {
          margin-bottom: 0.14rem;

          &:deep(.fill-span) {
            margin: 0 0.06rem;
            padding: 0 0.4rem;
            border-bottom: 2px solid #ccc;
          }
        }

        .recordInfo-content-question-item {
          padding-left: 0.32rem;

          .el-checkbox-button {
            --el-radio-button-disabled-checked-fill: var(
              --el-border-color-extra-light
            );

            &.is-checked:deep(.el-checkbox-button__inner) {
              background-color: var(--el-radio-button-disabled-checked-fill);
            }
          }

          .question-item-textarea {
            width: 4rem !important;
            &:deep(.el-textarea__inner) {
              height: 1.2rem;
            }
          }

          .recordInfo-content-answer {
            min-height: 1.5rem;
            margin-top: 0.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .user-answer {
              .success {
                color: #67c23a;
              }

              .error {
                color: #f56c6c;
              }

              .warning {
                color: #e6a23c;
              }
            }

            .question-difficult {
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
